<template>
    <div
        style="padding: 20px"
        v-if="functions !== ''"
    >
        <div
            v-for="(f_value, f_key, f_index) in functions"
            :key="f_index"
        >
            <v-divider
                class="border-opacity-100"
                :thickness="4"
                color="info"
                style="margin-top: 10px"
            ></v-divider>
            <v-card
                class="mx-auto"
                color="#E8EAF6"
                style="padding: 0px; margin: 0 20px 0 20px"
            >
                <v-card-title style="font-size: 16px;">
                    {{ f_key }}
                </v-card-title>
                <v-divider></v-divider>
                <v-card-text>
                    <v-chip-group
                        column
                        multiple
                        v-if="Object.keys(f_value.length !== 0)"
                    >
                        <div
                            v-for="(js_value, js_key, js_index) in f_value"
                            :key="js_index"
                        >
                            <chipEdit
                                :funcName="f_key"
                                :command="js_key"
                            ></chipEdit>
                        </div>
                    </v-chip-group>
                </v-card-text>
            </v-card>
        </div>
    </div>
</template>

<script>
import { useDesignStore } from '../../../../../../stores/design'
import chipEdit from './chipEdit.vue'

export default {
    components: {
        chipEdit
    },

    data() {
        return {
            design: useDesignStore()
        }
    },
    computed: {
        functions() {
            var func = {
                ClickFunctions: {},
                MouseDownFunctions: {},
                MouseUpFunctions: {},
                HoverFunctions: {},
                MouseLeaveFunctions: {}
            }
            Object.keys(func).forEach((funcName) => {
                // this.design.currentDomPointer.attr[funcName]
                // this.design.currentDomPointer.template[item]
                Object.keys(
                    this.design.currentDomPointer.attr[funcName]
                ).forEach((item) => {
                    func[funcName][item] = {
                        ...this.design.currentDomPointer.template[item][funcName]
                    }
                })
                if (Object.keys(func[funcName]).length === 0) {
                    delete func[funcName]
                }
            })
            if (Object.keys(func).length === 0) {
                func = ''
            }
            return func
        }
    }
}
</script>
